<template>
  <div>
    <div class="nav">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-dem"
        mode="horizontal"
      >
        <el-menu-item>
          <img src="@/assets/logo.png" alt="" />
        </el-menu-item>
        <el-menu-item index="1">
          <router-link to="/home" tag="span">首页</router-link>
        </el-menu-item>
        <el-menu-item index="2">
          <router-link to="/goods" tag="span">全部商品</router-link>
        </el-menu-item>
        <el-menu-item index="3">
          <router-link to="/about" tag="span">关于我们</router-link>
        </el-menu-item>
        <el-menu-item class="el-input">
          <el-input placeholder="请输入内容" v-model="search">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchClick"
            ></el-button>
          </el-input>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      activeIndex: "1",
      search: "", // 搜索条件
    };
  },
  mounted() {},
  methods: {
    // 点击搜索按钮
    searchClick() {
      // this.search 当前搜索的内容
      this.$router.push({ path: "/goods", query: { search: this.search } });
      this.search = "";
    },
  },
  computed: {},
  watch: {
 
  },
};
</script>

<style lang="scss" scoped>
.nav {
  width: 85%;
  margin: 20px auto;
  .el-menu {
    max-width: 1225px;
    margin: 0 auto;
  }
  .el-input {
    width: 300px;
    margin-left: 200px;
  }
}
</style>